<template>
    <div>
        <div class="title">{{ anIndexEvaluationMain.reginName }}数据填报</div>
        <div class="sub-title">
            <div>所属区域：{{ anIndexEvaluationMain.reginName }}</div>
            <div>填报人：{{ anIndexEvaluationMain.auditBy }}</div>
            <div>填报日期：{{ anIndexEvaluationMain.lstUpdTime }}</div>
            <div>指标总数：{{ anIndexEvaluationMain.totalQuestionNums }}</div>
            <div>当前填报序号：{{ anIndexEvaluationMain.currQuestionSeq }}</div>
        </div>
        <div>
            <el-form v-if="editProgress === 'detail'" ref="targetForm" class="demo-ruleForm" label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="指标代码">
                            <el-input v-model="currentIndexInfo.indexCode" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="指标信息">
                            <el-input v-model="currentIndexInfo.indexDesc" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="分类">
                            <el-input v-model="currentIndexInfo.fl" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-for="(item,index) of currentIndexInfo.children" :key="index">
                    <el-col :span="6">
                        <el-form-item :label="item.name">
                            <el-input v-model="item.value"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="权重">
                            <el-input v-model="item.qz" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="评估分数">
                            <el-input v-model="currentIndexInfo.score"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="评估概述" prop="reginEvalBiz">
                    <el-input v-model="currentIndexInfo.gs"
                              :maxlength="1000" type="textarea"></el-input>
                </el-form-item>

                <el-form-item label="上传材料">
                    <mul-pic-upload :affixList="affixList" :disabled="controlType !== 'area'" :value="affixListStr"
                                    @input="fileUpload"/>
                </el-form-item>

            </el-form>
            <div v-if="editProgress === 'main'">
                <el-form ref="ruleForm" class="demo-ruleForm" label-width="140px">
                    <template>
                        <el-form-item label="区域整体评估意见">
                            <el-input v-model="currentIndexInfo.reginEvalDesc" :disabled="controlType !== 'area'"
                                      :maxlength="1000" placeholder="整体评估意见" rows="10"
                                      type="textarea"></el-input>
                        </el-form-item>
                    </template>
                </el-form>
            </div>
            <div class="btn-box">
                <div>
                    <el-button v-if="anIndexEvaluationMain.currQuestionSeq !== 1 || editProgress === 'main'"
                               @click="before">上一项
                    </el-button>
                    <el-button v-if="editProgress === 'detail'" type="primary" @click="next">下一项</el-button>
<!--                    <el-button @click="storageData('Tem')">暂存</el-button>-->
                    <el-button v-if="editProgress === 'main' && controlType === 'admin'" type="danger"
                               @click="returnAdmin">管理员驳回
                    </el-button>
                    <el-button v-if="editProgress === 'main' && controlType === 'admin'" type="primary"
                               @click="expertAdmin">管理员确认
                    </el-button>

                    <el-button v-if="editProgress === 'main' && controlType === 'area'" type="primary"
                               @click="saveMain('area')">完成填报
                    </el-button>
                    <el-button v-if="editProgress === 'main' && controlType === 'expert'" type="primary"
                               @click="expertAudit">完成评估
                    </el-button>
                    <el-button v-if="editProgress === 'main' && controlType === 'view'" type="primary"
                               @click="returnList">返回列表
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MulPicUpload from '@/components/mul-pic-upload/index.vue'

export default {
	components: {MulPicUpload},
	props: {
		// 权限控制// area -- 区域   city -- 省市 province--省份  expert -- 专家
		controlType: {
			type: String,
			default: 'area'
		},
		editFormData: {
			type: Object,
			default: (() => {
				return {}
			})
		}
	},
	computed: {},
	data () {
		return {
			load: false,//
			editProgress: 'detail',//填报进度。 主页面 or 指标详情页面
			targetIndex: 0,
            anIndexEvaluationMain: {
                reginName: "新疆",
                auditBy: "张三",
                lstUpdTime: "2024-07-18",
                totalQuestionNums: "2",
                currQuestionSeq: 1
            },
			currentIndexInfo: {
                fl: "气候因素",
                qz: "80",
                wmqz: "20",
                indexCode: "001",
                indexDesc: "温度对蚊媒数量的影响",
                children: [
                    {name: "温度","code": "wd",qz: 80,value: ""},
                    {name: "蚊媒数量","code": "wm",qz: 80,value: ""}
                ]
            },
            allList: [
                {
                    fl: "气候因素",
                    qz: "80",
                    wmqz: "20",
                    indexCode: "001",
                    indexDesc: "温度对蚊媒数量的影响",
                    children: [
                        {name: "温度","code": "wd",qz: 80,value: ""},
                        {name: "蚊媒数量","code": "wm",qz: 80,value: ""}
                    ]
                },
                {
                    fl: "气候因素",
                    qz: "80",
                    wmqz: "20",
                    indexCode: "001",
                    indexDesc: "温度对候鸟数量的影响",
                    children: [
                        {name: "温度","code": "wd",qz: 80,value: ""},
                        {name: "候鸟数量","code": "wm",qz: 80,value: ""}
                    ]
                }
            ],
            affixList: [],
            affixListStr: ""

		}
	},
	mounted () {

	},
	methods: {
		initData () {
            this.editProgress = 'detail'
		},
		fileUpload (fileList) {
			console.log('🚀 ~ file', fileList)
			const loading = this.$loading({
				lock: true,
				text: '图片上传中',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			if (!wfy.empty(fileList) && fileList.length > 0) {
				this.affixList = []
				fileList.forEach((file) => {
					this.affixList.push({
						affixId: wfy.uuid(22),
						indexEvalDtlId: this.currentEvalDtl.evalDtlId,
						affixPath: file.response,
						affixName: file.name
					})
				})
				this.affixList = Array.from(new Set(this.affixList))
				let affixPathList = []
				this.affixList.forEach((img) => {
					affixPathList.push(img.affixPath)
				})
				console.log('🚀 ~ affixPathList', affixPathList)
				this.affixListStr = affixPathList.length ? affixPathList.join(',') : ''
				loading.close()
			} else {
				this.affixList = []
				this.affixListStr = ''
				loading.close()
			}
		},
		submitForm (formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {

				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		resetForm (formName) {
			this.$refs[formName].resetFields()
		},
		before () {
			if (this.editProgress === 'main') {
				this.editProgress = 'detail'
			} else {
                this.currentIndexInfo = this.allList[0];
			}
		},
		next () {
            if(this.anIndexEvaluationMain.currQuestionSeq === 1){
                this.currentIndexInfo = this.allList[1];
                this.anIndexEvaluationMain.currQuestionSeq = 2;
            }else{
                this.editProgress = 'main'
            }

		},
		// 保存详细信息  type === Tem(暂存)
		saveDetail (type) {

		},
		// 保存主信息
		saveMain (type, storageFlag) {
            this.$emit('success', {
                reginId: this.anIndexEvaluationMain.reginId,
                evalYear: this.anIndexEvaluationMain.evalYear,
            })

		},
		// 区域保存填报进度
		allSave () {
			this.$alert('保存成功！', '友情提醒')
		},



		// 专家审批保存
		expertAudit () {
			this.$confirm('完成评估后将产生最终评估报告，是否确认？', '友情提醒', {}).then(() => {
				this.saveMain('expert')
			})
		},
        // 管理员确认
        expertAdmin () {
            this.$confirm('确定要进行管理员确认吗？', '友情提醒', {}).then(() => {
                this.saveMain('admin')
            })
        },
        // 管理驳回
        returnAdmin(){
            this.$confirm('确定要进行管理员驳回吗？驳回后专家可以再次进行评审', '友情提醒', {}).then(() => {
                this.saveMain('adminReturn')
            })
        },
		// 返回列表页面
		returnList () {
			this.$confirm('要返回列表界面，是否确认？', '友情提醒', {}).then(() => {
				this.$emit('success', {
					reginId: this.anIndexEvaluationMain.reginId,
					evalYear: this.anIndexEvaluationMain.evalYear,
				})
			})
		},

	}
}
</script>

<style lang="scss" scoped>
.title {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  font-width: bolder;
}

.el-textarea__inner::placeholder {
  color: #909399;
  text-align: center;
  vertical-align: middle;
}


.btn-box {
  display: flex;
  height: 60px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.sub-title {
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #909399;
}
</style>
